<template>
  <t-modal :title="title" :width="640" :visible="visible" :confirmLoading="loading"
           @ok="() => { $emit('ok') }" @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item class="hiddenItem">
          <!-- uuid隐藏 -->
          <a-input v-decorator="['uuid']" disabled type="hidden"/>
        </a-form-item>

        <a-row :gutter="16">
          <a-col class="gutter-row" :span="24">
            <a-form-item :label="$ct('languageName','语言名称')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<a-select
								placeholder="请选择语言种类"
								v-decorator="['configKey',{ rules: [{ required: true,  message: '请选择语言种类' }] }]"
								style="width: 100%"
								@change="handleChange"
							>
								<a-select-option :key="index" :value="item.name" v-for="(item,index) in langType">
									{{item.name}}
								</a-select-option>
							</a-select>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item :label="$ct('languageCode','语言编码')" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<a-input
								:disabled="true"
								v-decorator="['configValue']"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

  </t-modal>
</template>

<script>
import pick from 'lodash.pick'
// 表单字段
const fields = [
  'uuid',
  'configKey',
  'configValue',
  'configStatus',
  'configSort',
  'tenantUuid'
]

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      title: "",
      size: 'default',
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      form: this.$form.createForm(this),
			langType: [{
				name: "阿拉伯",
				code: "ar_EG"
			},{
				name: "保加利亚语",
				code: "bg_BG"
			},{
				name: "加泰罗尼亚语",
				code: "ca_ES"
			},{
				name: "捷克语",
				code: "cs_CZ"
			},{
				name: "德语",
				code: "de_DE"
			},{
				name: "希腊语",
				code: "el_GR"
			},{
				name: "英语",
				code: "en_GB"
			},{
				name: "英语（美式）",
				code: "en_US"
			},{
				name: "西班牙语",
				code: "es_ES"
			},{
				name: "爱沙尼亚语",
				code: "et_EE"
			},{
				name: "波斯语",
				code: "fa_IR"
			},{
				name: "芬兰语",
				code: "fi_FI"
			},{
				name: "法语（比利时）",
				code: "fr_BE"
			},{
				name: "法语",
				code: "fr_FR"
			},{
				name: "希伯来语",
				code: "he_IL"
			},{
				name: "印地语",
				code: "hi_IN"
			},{
				name: "匈牙利",
				code: "hu_HU"
			},{
				name: "冰岛语",
				code: "is_IS"
			},{
				name: "印度尼西亚语",
				code: "id_ID"
			},{
				name: "意大利语",
				code: "it_IT"
			},{
				name: "日语",
				code: "ja_JP"
			},{
				name: "卡纳达语",
				code: "kn_IN"
			},{
				name: "韩语/朝鲜语",
				code: "ko_KR"
			},{
				name: "挪威",
				code: "nb_NO"
			},{
				name: "尼泊尔语",
				code: "ne_NP"
			},{
				name: "荷兰语（比利时）",
				code: "nl_BE"
			},{
				name: "荷兰语",
				code: "nl_NL"
			},{
				name: "波兰语",
				code: "pl_PL"
			},{
				name: "葡萄牙语（巴西）",
				code: "pt_BR"
			},{
				name: "葡萄牙语",
				code: "pt_PT"
			},{
				name: "斯洛伐克语",
				code: "sk_SK"
			},{
				name: "塞尔维亚",
				code: "sr_RS"
			},{
				name: "斯洛文尼亚",
				code: "sl_SI"
			},{
				name: "瑞典语",
				code: "sv_SE"
			},{
				name: "泰语",
				code: "th_TH"
			},{
				name: "土耳其语",
				code: "tr_TR"
			},{
				name: "俄罗斯语",
				code: "ru_RU"
			},{
				name: "乌克兰语",
				code: "uk_UA"
			},{
				name: "越南语",
				code: "vi_VN"
			},{
				name: "简体中文",
				code: "zh_CN"
			},{
				name: "繁体中文",
				code: "zh_TW"
			}]
    }
  },
  methods: {
    add(m, data) {
      console.log(m, data)
    },
    edit(m, data) {
      console.log(m, data)
    },
		handleChange(e,options){
			let index = options.key;
			this.form.setFieldsValue({
				configValue: this.langType[index].code
			})
		}
  },
  created() {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))
    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  }
}
</script>
<style lang="less">
.custom-tip {
  max-width: 600px !important;

  p {
    color: #000;
  }

  .ant-tooltip-arrow::before {
    background-color: #fff !important;
  }

  .ant-tooltip-inner {
    background-color: #fff !important;
  }
}
</style>
